<template>
    <basic-container>
        <avue-crud v-model="form" v-bind="bindVal" :page.sync="page" :highlight-current-row="true" v-on="onEvent">
        </avue-crud>
    </basic-container>
</template>

<script>
export default {
    data() {
        return {
            data: [],
            loading: false,
            page: {},
            form: {}
        }
    },
    computed: {
        bindVal() {
            return {
                ref: 'crud',
                option: this.option,
                data: this.data,
                tableLoading: this.loading,
            }
        },
        onEvent() {
            return {
                'on-load': this.getList,
                'row-save': this.rowSave,
                'row-update': this.rowUpdate,
                'row-del': this.rowDel,
            }
        },
        option() {
            return {
                stripe: true,
                headerAlign: 'left',
                align: 'left',
                border: true,
                defaultExpandAll: false,
                selection: true,
                tip: false,
                searchMenuSpan: 6,
                searchMenuPosition: 'left',
                size: 'mini',
                highlightCurrentRow: true,
                maxHeight: '600',
                column: [
                    {
                        label: '序号',
                        prop: '$index'
                    },
                    {
                        label: '名称',
                        prop: 'name'
                    }
                ],
            }
        }
    },
    methods: {
        getList() {
            const length = 5
            const data = Array.from({ length }).map((item, index) => ({ name: '待批事项' + index }));
            this.data = data
            this.page.total = length
            this.page.currentPage = 1
            this.page.pageSize = 10
        },
        rowSave(row, done, loading) {
            this.data.push(row)
            done()
        },
        rowUpdate(row, index, done, loading) {
            this.data[index] = row
            done()
        },
        rowDel(row, index, loading) {
            this.$confirm(`确定要操作此条数据吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.data.splice(index, 1)
            })
        }
    }
}
</script>

<style>

</style>